<template>
	<view v-if="detail.order_id">
		<!-- 头部状态 -->
		<view class="order-status">
			{{detail.user_status_mean}}<text v-if="detail.is_disagree == 1">--售后</text>
		</view>

		<!-- 收货信息 -->
		<view class="card-warp">
			<view class="flex_box aic ">
				<view class="item">
					<view class="fs34 fwb lh34">收货信息</view>
				</view>
				<view @click="copy(
							`负责人：${detail.mail_adddress.person} TEL:${detail.mail_adddress.mobile}
${detail.mail_adddress.address}`)" class="fs34 text-[#FF4907]">复制收货信息</view>
			</view>
			<view class="mt20 fs28 r_bt1 pt20">
				<view>{{detail.mail_adddress.person}} <text class="ml20">{{detail.mail_adddress.mobile}}</text></view>
				<view class="mt10" style="line-height: 1.3;">{{detail.mail_adddress.address}}</view>
			</view>
		</view>

		<!-- 物品信息 -->
		<view class="card-warp">
			<view class="tac catd-title fs34 fwb lh34">发货信息</view>
			<view class="mt15 fs30 lh36">
				<text class="cor_aaa">发货数量：</text>
				<text>{{detail.expect_num}}</text>
			</view>
			<view class="mt15 fs30 lh36">
				<text class="cor_aaa">预计金额：</text>
				<text>￥{{detail.expect_price}}</text>
			</view>
			<view @click="show =  true" class="mt15 fs30 lh36" v-if="products?.list.length  > 0">
				<text class="cor_aaa">发货明细：</text>
				<text class="text-[#FF4907]">点击查看</text>
			</view>
			<view  class="mt15 fs30 lh36" v-if="detail.express_number">
				<text class="cor_aaa">物流单号：</text>
				<text class="text-[#FF4907]">{{detail.express_number}}</text>
			</view>
			<view class="mt20">
				<view class="fsb fs30 lh34 cor_aaa">备注信息</view>
				<view class="mt20 mb20" style="line-height: 1.3;">
					<text>{{detail.remarks}}</text>
				</view>
				<view class="bz-image">
					<image :key="img" v-for="img in detail.remarks_images" :src="img"></image>
				</view>
			</view>
		</view>
		<!-- 物品信息 -->
		<view class="card-warp" v-if="detail.user_status > 2">
			<view class="tac catd-title fs34 fwb lh34">质检单</view>

	<!-- 售后产品 -->
			<view class="pro-warp mt-[20rpx]" v-if="qcProducts?.th?.list.length > 0">
				<checkbox-group @change="setShIds">
					<view style="font-size: 30rpx;margin: 20rpx 0;color: #FF4907;">退货列表</view>
					<view class="pro-item" v-for="one in qcProducts?.th?.list" :key="one.cat_one_id">
						<view class="pro-type fs30 fwb mt20">{{one.cat_one_name}}</view>
						<view class="pro-cat-item mt20 fs24" v-for="tow in one.child" :key="tow.cat_tow_id">
							<view class="pro-cat-h fs24 ">
								<view class="fwb cor_333">{{tow.cat_tow_name}}</view>
								<view class="fs20">数量</view>
								<view class="fs20">单价</view>
								<view class="fs20">总价</view>
							</view>
							<view class="pro-p-item fs24 cor_666 mt20" :key="product.user_order_id"
								v-for="product in tow.child">
								<view class="flex">
									<checkbox :value="product.order_product_id" v-if="isShouhou"
										style="transform:scale(0.7)" />
									<view style="flex: 1;">
										<view>{{product.product_name}}</view>
										<view>{{product.level_name}}</view>
									</view>
								</view>
								<view>x{{product.num}}</view>
								<view>￥{{product.qc_price}}</view>
								<view>￥{{product.qc_sum_price}}</view>
							</view>
						</view>
					</view>
					<!-- <view class="flex_box aic mt20 r_bt1 pt20">
						<view class="item fsb fs30">
							<text>预计收益：</text>
							<text class="cor_F46">￥{{products.count.price}}</text>
						</view>
						<view class="fs30 item fsb">
							<text>预计数量：</text>
							<text class="cor_F46">{{products.count.num}} 个</text>
						</view>
					</view> -->
				</checkbox-group>
			</view>

			<!-- 售后产品 -->
			<view class="pro-warp mt-[20rpx]" v-if="qcProducts?.yy?.list.length > 0">
				<checkbox-group @change="setShIds">
					<view style="font-size: 30rpx;margin: 20rpx 0;color: #ff9900;">售后中的产品</view>
					<view class="pro-item" v-for="one in qcProducts?.yy?.list" :key="one.cat_one_id">
						<view class="pro-type fs30 fwb mt20">{{one.cat_one_name}}</view>
						<view class="pro-cat-item mt20 fs24" v-for="tow in one.child" :key="tow.cat_tow_id">
							<view class="pro-cat-h fs24 ">
								<view class="fwb cor_333">{{tow.cat_tow_name}}</view>
								<view class="fs20">数量</view>
								<view class="fs20">单价</view>
								<view class="fs20">总价</view>
							</view>
							<view class="pro-p-item fs24 cor_666 mt20" :key="product.user_order_id"
								v-for="product in tow.child">
								<view class="flex">
									<checkbox :value="product.order_product_id" v-if="isShouhou"
										style="transform:scale(0.7)" />
									<view style="flex: 1;">
										<view>{{product.product_name}}</view>
										<view>{{product.level_name}}</view>
									</view>
								</view>
								<view>x{{product.num}}</view>
								<view>￥{{product.qc_price}}</view>
								<view>￥{{product.qc_sum_price}}</view>
							</view>
						</view>
					</view>
					<view class="flex_box aic mt20 r_bt1 pt20">
						<view class="item fsb fs30">
							<text>预计收益：</text>
							<text class="cor_F46">￥{{products.count.price}}</text>
						</view>
						<view class="fs30 item fsb">
							<text>预计数量：</text>
							<text class="cor_F46">{{products.count.num}} 个</text>
						</view>
					</view>
				</checkbox-group>
			</view>


			<!-- 发货物品 -->
			<view class="pro-warp mt-[20rpx]" v-if="qcProducts?.cj?.list.length > 0">
				<view style="font-size: 30rpx;margin: 20rpx 0;color: #ff9900;">回收列表</view>
				<checkbox-group @change="setShIds">
					<view class="pro-item" v-for="one in qcProducts?.cj?.list" :key="one.cat_one_id">
						<view class="pro-type fs30 fwb mt20">{{one.cat_one_name}}</view>
						<view class="pro-cat-item mt20 fs24" v-for="tow in one.child" :key="tow.cat_tow_id">
							<view class="pro-cat-h fs24 ">
								<view class="fwb cor_333">{{tow.cat_tow_name}}</view>
								<view class="fs20">数量</view>
								<view class="fs20">单价</view>
								<view class="fs20">总价</view>
							</view>
							<view class="pro-p-item fs24 cor_666 mt20" :key="product.user_order_id"
								v-for="product in tow.child">
								<view class="flex">
									<checkbox :value="product.order_product_id" v-if="isShouhou"
										style="transform:scale(0.7)" />
									<view style="flex: 1;">
										<view>{{product.product_name}}</view>
										<view>{{product.level_name}}</view>
									</view>
								</view>
								<view>x{{product.num}}</view>
								<view>￥{{product.qc_price}}</view>
								<view>￥{{product.qc_sum_price}}</view>
							</view>
						</view>
					</view>
					<view class="flex_box aic mt10  pt20">
						<view class="item fsb fs30">
							<text>回收价：</text>
							<text class="cor_F46">￥{{detail.qc_price}}</text>
						</view>
						<view class="fs30 item fsb">
							<text>服务费：</text>
							<text class="cor_F46">￥{{detail.qc_service_price}} 个</text>
						</view>
					</view>
					<view class="flex_box aic mt10  pt20">
						<view class="item fsb fs30">
							<text>加价券：</text>
							<text class="cor_F46">￥0</text>
						</view>
						<view class="fs30 item fsb">
							<text>运费补贴：</text>
							<text class="cor_F46">￥{{detail.postage}} </text>
						</view>
					</view>
					<view class="flex_box aic mt10  pt20">
						<view class="item fsb fs30">
							<text>实际收益：</text>
							<text class="cor_F46">
								￥{{detail.qc_price - 0 + (detail.postage - 0)  - detail.qc_service_price}}
							</text>
						</view>
						<view class="item fsb fs30">
							<text>成交数量：</text>
							<text class="cor_F46">
								{{qcProducts?.cj?.count?.num || 0}}
							</text>
						</view>
					</view>
				</checkbox-group>
			</view>



			<view class="mt20">
				<view class="fsb fs30 lh34">备注信息</view>
				<view class="mt20 mb20" style="line-height: 1.3;">
					<text>{{detail.notes}}</text>
				</view>
				<view class="bz-image">
					<image @click="showImageAll(detail.notes_photos,img)" :key="img" v-for="img in detail.notes_photos" :src="img"></image>
				</view>
			</view>



		</view>


		<!-- 订单信息 -->
		<view class="card-warp">
			<view class="flex_box aic mb20 ">
				<view class="item">
					<view class="fs34 fwb lh34">订单信息</view>
				</view>
			</view>
			<view class="mt15 fs30 lh36 ">
				<text class="cor_aaa">订单编号：</text>
				<text>{{detail.sn}}</text>
			</view>
			<view class="mt15 fs30 lh36 ">
				<text class="cor_aaa">回收方式：</text>
				<text>物流发货</text>
			</view>
			<view class="mt15 fs30 lh36 ">
				<text class="cor_aaa">收款方式：</text>
				<text>用户钱包</text>
			</view>
			<view class="mt15 fs30 lh36 ">
				<text class="cor_aaa">下单时间：</text>
				<text>{{detail.create_time}}</text>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<!-- 操作区域 -->
		<view class="amount_money_fix" v-if="detail.is_disagree == 0">
			<view class="flex_box jcfe">
				<!-- 1待发货 2待质检 3质检中 4洽谈中 5已成交 6已成交（部分退货）  7已退货 -->
				<!-- 提交发货 -->
				<!-- 删除订单 -->
				<!-- 申请售后 -->
				<!-- 确认成交 -->
				<view class="btn_2" @click="isShouhou = false" v-if="isShouhou">取消售后</view>
				<view class="btn_1" @click="shEnv(2)" v-if="isShouhou">全部售后</view>
				<view class="btn_1" @click="shEnv(1)" v-if="isShouhou">部分售后</view>


				<view @click="DeleteHand()" v-if="detail.user_btn.indexOf('shanchu') > -1 " class="btn_2">删除订单</view>
				<view v-if="detail.user_btn.indexOf('shouhou') > -1 &&  isShouhou==false" @click="isShouhou = true"
					class="btn_2">申请售后</view>
				<view @click="fahuoEnv()" v-if="detail.user_btn.indexOf('fahuo') > -1" class="btn_1">提交发货</view>
				<view @click="okOrderEnv()" v-if="detail.user_btn.indexOf('chengjiao') > -1 &&  isShouhou==false" class="btn_1">确认成交</view>

			</view>
		</view>

		<!-- 发货单 -->
		<u-popup mode="bottom" v-model="show">
			<view class="pro-warp mt-[20rpx] pop-fhd" v-if="products?.list.length > 0">
				<view class="pro-item" v-for="one in products?.list" :key="one.cat_one_id">
					<view class="pro-type fs30 fwb mt20">{{one.cat_one_name}}</view>
					<view class="pro-cat-item mt20 fs24" v-for="tow in one.child" :key="tow.cat_tow_id">
						<view class="pro-cat-h fs24 ">
							<view class="fwb cor_333">{{tow.cat_tow_name}}</view>
							<view class="fs20">数量</view>
							<view class="fs20">单价</view>
							<view class="fs20">总价</view>
						</view>
						<view class="pro-p-item fs24 cor_666 mt20" :key="product.user_order_id"
							v-for="product in tow.child">
							<view >
								<view>{{product.product_name}}</view>
								<view>{{product.level_name}}</view>
							</view>
							<view>x{{product.num}}</view>
							<view>￥{{product.price}}</view>
							<view>￥{{product.sum_price}}</view>
						</view>
					</view>
				</view>

			</view>

		</u-popup>
		
		<!-- 发货 -->
		<!-- 提交发货 -->
		<u-modal v-model="fahuoShow" @confirm="fahuoHand" asyncClose closeOnClickOverlay title="填写物流单号">
			<view class="slot-content">
				<view class="flex_box aic pa20">
					<view class="item ov"><input v-model="express_number" type="text" class="ipt_01"
							placeholder-style="color: #BBBBBB;" placeholder="请输入快递单号" /></view>
					<image @click="saohand" src="@/static/icon_saomiao.png" class="ml35 vt"
						style="width: 36rpx; height: 33rpx;"></image>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { apiDetail, shouhou } from '@/api/order'
	import {showImageAll,showImage,call,copy,lookMap} from "@/utils/tools.ts"
	import { apiList, deleteOrder, fahuo,okOrder } from '@/api/order'


	const detail = ref<any>({})
	const products = ref<any>({ list: [] })
	const qcProducts = ref<any>({ list: [] })
	const isShouhou = ref(false);
	const shIds = ref([]);
	const OrderId = ref(0);
	const show = ref(false);
	
	const express_number = ref('');
	const fahuoShow = ref(false);
	
	let ID = ''

const fahuoEnv = (y) => {
		fahuoShow.value = true;
	
	}


	const saohand = () => {
		uni.scanCode({
			success: function (res) {
				express_number.value = res.result
			}
		})
	}
	
	const okOrderEnv = ()  => {
		uni.showModal({
			title: '提示',
			content: `确认成交该定单吗？`,
			success: function (res) {
				if (res.confirm) {
					uni.showLoading();
					okOrder({ id: OrderId.value }).then(() => {
						uni.hideLoading();
						getData(OrderId.value)
						// uni.reLaunch({
						// 	url:'/pages/orderlist/orderlist',
						// })
					})	
				} 
			}
		});
	}
		
	const DeleteHand = (id:any)  => {
		uni.showModal({
			title: '提示',
			content: `确认删除该定单吗？`,
			success: function (res) {
				if (res.confirm) {
					uni.showLoading();
					deleteOrder({ id: OrderId.value }).then(() => {
						uni.hideLoading();
						uni.reLaunch({
							url:'/pages/orderlist/orderlist',
						})
					})	
				} 
			}
		});
	}

	const fahuoHand = () => {
		uni.showLoading();
		fahuo({ id: OrderId.value, express_number: express_number.value }).then(() => {
			uni.hideLoading();
			fahuoShow.value = false;
			uni.reLaunch({
				url:'/pages/orderlist/orderlist',
			})
			express_number.value = "";
		}).catch(() => {
			fahuoShow.value = false;
		})
	}



	const shEnv = async (type : any) => {

		if (type == 1 && shIds.value.length <= 0) {
			uni.showToast({
				title: '请选择要售后的机型',
				icon: 'none'
			})
			return false;
		}
		// let msg = "确认"

		uni.showModal({
			title: '提示',
			content: `确认售后该订单吗？`,
			success: function (res) {
				if (res.confirm) {
					uni.showLoading();
					shouhou({ t: type, ids: shIds.value, id: OrderId.value }).
						then(() => {
							uni.hideLoading();
							getData(OrderId.value);
						})
				}
			}
		});
		console.log("aaa", shIds.value);
	}
	const setShIds = (e : any) => {
		shIds.value = e.detail.value;
	}

	const getData = async (id : Number) => {
		let data = await apiDetail({ id });
		detail.value = data.detail;
		products.value = data.product;
		qcProducts.value = data.qcproduct
	}



	onLoad((options : any) => {
		ID = options.id || 0;
		OrderId.value = ID;
		getData(ID)
	})
</script>

<style lang="scss">
	.pop-fhd {
		height: 60vh;
		overflow-y: auto;
		padding: 0 20rpx;
	}

	.amount_money_fix {
		position: fixed;
		width: 100%;
		padding: 22rpx 20rpx calc(22rpx + env(safe-area-inset-bottom));
		left: 0;
		bottom: 0;
		background: #fff;
		z-index: 5;

		.btn_1,
		.btn_2,
		.btn_3 {
			width: 168rpx;
			height: 78rpx;
			border-radius: 49rpx;
			text-align: center;
			line-height: 78rpx;
			font-size: 26rpx;
			font-weight: 400;
			margin: 0 10rpx;
		}

		.btn_1 {
			 background: linear-gradient(180deg, #F7DA1C 0%, #ffc200 100%);

			color: #fff;
		}

		.btn_2 {
			border: 1rpx solid #F7DA1C;
			color: #F7DA1C;
		}

		.btn_3 {
			border: 1rpx solid #AAAAAA;
			color: #AAAAAA;
		}
	}

	.bz-image {

		flex-wrap: wrap;

		// flex-flow:wrap;
		image {
			width: 150rpx;
			height: 150rpx;
			margin: 10rpx;
		}
	}

	.pro-warp {

		.pro-cat-h,
		.pro-p-item {
			display: flex;

			view {
				width: 125rpx;

				&:nth-child(1) {
					flex: 1
				}

			}

		}
	}


	.order-status {
		width: 100vw;
		height: 150rpx;
		background: #FF4907;
		color: #fff;
		font-size: 44rpx;
		font-weight: bold;
		text-align: center;
		line-height: 150rpx;
	}

	.card-warp {
		width: 100vw;
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 24rpx;
	}
</style>